<template>
	<view>
		<button @click="downloadImage">下载图片</button>
		<image v-if="imageUrl" :src="imageUrl" style="width: 300rpx; height: 300rpx; margin: 20rpx;" />
		<view v-if="progress > 0 && progress < 100" style="margin: 20rpx;">
			进度: {{ progress }}%
			<progress :percent="progress" stroke-width="4" />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const imageUrl = ref('');
const progress = ref(0);

const downloadImage = () => {
	progress.value = 0; // 重置进度
	uni.downloadFile({
		url: "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg",
		success: (res) => {
			if (res.statusCode === 200) {
				imageUrl.value = res.tempFilePath;
				console.log('图片下载成功:', res.tempFilePath);
			}
		},
		fail: (err) => {
			console.error('下载失败:', err);
		},
		onProgressUpdate: (res) => {
			progress.value = res.progress;
			console.log('下载进度:', res.progress, '%');
		}
	});
};
</script>

<style>
</style>